import { Button, Modal, Select, message,Checkbox, Input, Radio } from "antd"
import { connect } from "dva"
import React from "react"
import moment from "moment"
import { Form } from '@ant-design/compatible';
const FormItem = Form.Item
const { Option } = Select
const { TextArea } = Input
@connect((state) => ({
  warningRecord: state.warningRecord,
  menu: state.menu,
}))
class SendMsgModal extends React.Component {
  state = {
    userList: [
      { opUser: '1', userName: '人员' },
      { opUser: '2', userName: '人员2' }
    ]
  };

  componentDidMount () { }

  handleOk = () => {
    const { dispatch, form, record, userList } = this.props
    form.validateFields({ force: true }, (err, values) => {
      if (err) {
        return
      }

      let params = {
        businessCode: 'risk-warn-log',
        businessId: record.uuid,
        vin: record.vin,
        ...values,
        // warnChannel: values.warnChannel.join(','),
        warnReceiver: values.warnReceiver.join(","),
        warnReceiverName: values.warnReceiver
          .map((opUser) => {
            return userList.find((item) => item.opUser === opUser)?.opUser;
          })
          .join(","),
      }
      // params.warningEmail = values.emailList.join(",")
      // delete params.emailList
      console.log(params)

      dispatch({
        type: "overdueCar/postObjWithRes",
        payload: {
          url: "/mscreditbusiness/vehicle/risk/warn/sendRiskMsg",
          ...params,
        },
        callback: (response) => {
          if (response.statusCode === "0") {
            message.success("发送成功")
            this.onCancel()
          } else {
            // message.error(response.statusMessage)
          }
        }
      })
    })
  };
  warnChannelChange = e => {
    console.log('warnChannel', e.target.value)
    const warnChannel = e.target.value
    const { form: { setFieldsValue }, record } = this.props
    let riskWarnMsg = record?.warnTemplate
    // if (warnChannel == 'sms') {
    //   riskWarnMsg = `${record?.riskTriggerDate ? moment(record?.riskTriggerDate).format('YYYY-MM-DD HH:mm:ss') : ''}系统发现车辆${record?.vin}${record?.riskWarnMsg}`
    // } else if (warnChannel == 'email') {
    //   riskWarnMsg = `${record?.riskTriggerDate ? moment(record?.riskTriggerDate).format('YYYY-MM-DD HH:mm:ss') : ''}系统发现车辆${record?.vin}${record?.riskWarnMsg}，可点击url查看详情`
    // } else {
    //   riskWarnMsg = record?.warnTemplate || ''
    // }
    setFieldsValue({ riskWarnMsg })
  };
  onCancel = () => {
    const { form, changeVisible } = this.props
    form.resetFields()
    changeVisible()
  };
  render () {
    // const { userList } = this.state
    const { getFieldDecorator } = this.props.form

    const { visible, changeVisible, userList } = this.props
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    }
    const transferUser = (arrayData = []) =>
    arrayData.map((item) => (
      <Option key={item.opUser}>{item.opUser}</Option>
    ));
    const warningTypeOptions = [
      {
        value: 'stationLetter',
        label: '站内信'
      }, {
        value: 'sms',
        label: '短信'
      }, {
        value: 'email',
        label: '邮件'
      }
    ]
    return (
      <Modal
        title="管理告警"
        width={750}
        onCancel={() => changeVisible()}
        visible={visible}
        footer={[
          <Button key="back" size="default" onClick={this.onCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" size="default" onClick={this.handleOk}>
            提交
          </Button>
        ]}
      >
        <Form>
          <FormItem label="请选择需要告警的人员" {...formItemLayout}>
            {getFieldDecorator('warnReceiver', {
              rules: [{ required: true, message: '请选择需要告警的人员' }],
            })(
              <Select
                allowClear
                mode='multiple'
                placeholder='请选择'
              >
                {transferUser(userList)}
              </Select>,
            )}
          </FormItem>
          <FormItem label="请选择告警方式" {...formItemLayout}>
            {getFieldDecorator('warnChannel', {
              rules: [{ required: true, message: '请选择告警方式' }],
            })(
              <Radio.Group options={warningTypeOptions} onChange={this.warnChannelChange} />
            )}
          </FormItem>
          <Form.Item label='请确认告警内容' {...formItemLayout}>
            {getFieldDecorator('riskWarnMsg', {
              rules: [{ required: true, message: '请填写告警内容' }],
            })(
              <TextArea rows={4} maxLength={128} allowClear />
            )}
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}
export default connect()(Form.create()(SendMsgModal))
